<template>
  <header class="header">
    <div class="header-logo">
      <span class="logo-text">校园圈</span>
    </div>
    <div class="header-search">
      <form @submit.prevent="handleSearch">
        <input type="text" v-model="searchKeyword" placeholder="请输入关键字"  @input="checkLength"/>
        <button type="submit">搜索</button>
      </form>
    </div>
    <div class="my-account">
      <a href="#">我的</a>
    </div>
  </header>
  <div v-for="(post, index) in posts" :key="index" class="post">
  <div class="container">
    <header class="header">
      <h1>{{ post.type }}</h1>
    </header>

    <main class="content">
      <article>
        <h2>{{ post.title }}</h2>
        <div class="post-text" v-html="post.text"></div>

        <image-preview v-if="post.image" :src="post.image" alt="Post Image"/>
        <footer>
          <div class="post-header">
            <img :src="post.user.avatar" style="width: 50px; height: 50px;" class="avatar" alt="Avatar">
            <div class="user-info">
              <h3 class="username" >{{ post.user.name }}</h3>
              <p class="timestamp">{{ post.timestamp }}</p>
            </div>
          </div>
        </footer>
      </article>
    </main>
  </div>
  </div>
</template>
<script  setup>
//引入帖子数据
import { ref } from 'vue';
//引入帖子数据
import { listPostBarManger, getPostBarManger, delPostBarManger, addPostBarManger, updatePostBarManger } from "@/api/PostBarManger/PostBarManger";
//引入用户信息
import { getUserProfile } from "@/api/system/user";
//引入点赞信息
import { addLikes} from "@/api/likes/likes";


const avatarSrc = ref();
const username = ref();
const userAccount1 = ref();
getUserProfile().then(response => {
  username.value = response.data.userAccount;
  avatarSrc.value = response.data.avatar;
  userAccount1.value = response.data.phonenumber;
})


const { proxy } = getCurrentInstance();
const { post_type, sys_yes_no } = proxy.useDict('post_type', 'sys_yes_no');

const PostBarMangerList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);

//处理时间
function formatRelativeTime(timestamp) {
  const now = new Date();
  const diff = now - timestamp;

  if (diff < 60 * 1000) {
    return '刚刚';
  } else if (diff < 120 * 1000) {
    return '1 分钟前';
  } else if (diff < 3600 * 1000) {
    return Math.floor(diff / (60 * 1000)) + ' 分钟前';
  } else if (diff < 7200 * 1000) {
    return '1 小时前';
  } else if (diff < 24 * 3600 * 1000) {
    return Math.floor(diff / (3600 * 1000)) + ' 小时前';
  } else if (diff < 48 * 3600 * 1000) {
    return '昨天';
  } else {
    return Math.floor(diff / (24 * 3600 * 1000)) + ' 天前';
  }
}

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    postId: null,
    userAccount: null,
    nickName: null,
    postType: null,
    postTitle: null,
    content: null,
    photo: null,
    publishDate: null,
    hot: null,
    delFlag: null
  },
  rules: {
    userAccount: [
      { required: true, message: "发布账号不能为空", trigger: "blur" }
    ],
    nickName: [
      { required: true, message: "用户昵称不能为空", trigger: "blur" }
    ],
    postType: [
      { required: true, message: "帖子类别不能为空", trigger: "blur" }
    ],
    postTitle: [
      { required: true, message: "帖子标题不能为空", trigger: "blur" },
      { max: 15, message: "帖子标题不能多于15个字符", trigger: "blur"}
    ],
    content: [
      { required: true, message: "帖子内容不能为空", trigger: "blur" },
      { max: 1000, message: "帖子内容不能多于1000个字符", trigger: "blur"}
    ]

  }
});
const { queryParams, form, rules } = toRefs(data);


const urlParams = new URLSearchParams(window.location.search);
const title = urlParams.get('title');
const type = urlParams.get('type');
//获取数据
const posts = ref([]);
function getList() {
  queryParams.value.postTitle = title;
  listPostBarManger(queryParams.value)
      .then(response => {
        const reversedRows = [...response.rows].reverse();
        //显示帖子
        posts.value = reversedRows.map(post => {
          const publishDate = new Date(post.publishDate);
          const relativeTime = formatRelativeTime(publishDate); // 假设你已经定义了formatRelativeTime函数

          return {
            postId: post.postId,
            user: {
              name: post.nickName,
              avatar: 'https://img1.baidu.com/it/u=193696007,2125345610&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1722013200&t=095d741d73979761af717338fd470eb1'
            },
            timestamp: relativeTime, // 使用相对时间替换原始时间字符串
            text: post.content,
            image: post.photo,
            likeCount: post.likeCount,
            hot: post.hot,
            type:post.postType,
            title: post.postTitle
          };
        });

        total.value = response.total;
      })
      .catch(error => {
        console.error("Failed to fetch list:", error);
      });
}
getList();


</script>
<style scoped>

.header {
  height: 80px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white;
  padding: 10px 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}


.header-language a {
  color: #000000;
  text-decoration: none;
  margin-right: 10px;
}
.header-logo {
  color: #000000;
  font-size: xx-large;
  margin-left: 100px;
}
.header-search {
  margin-right: 50px;
  position: relative;
}

.header-search input {
  width: 500px;
  height: 50px;
  padding: 5px 10px;
  border: none;
  border-radius: 10px;
  background-color: #dddddd;
  color: #000000;
  font-size: 25px;
  outline: none;
  transition: all 0.3s ease;

}
.my-account {
  margin-right: 80px;
  color: #ffffff;
  font-size: 25px;
}

.header-search button {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: transparent;
  border: none;
  color: #000000;
  font-size: 20px;
  cursor: pointer;
  padding: 5px 10px;

}


.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.navigation ul {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 10px;
}

.content {
  margin-top: 20px;
}

article {
  background-color: #f5f5f5;
  padding: 20px;
  border-radius: 5px;
}

footer span {
  display: block;
  margin-top: 5px;
}



.post-header {
  display: flex;
  align-items: center;
}
.user-info {
  margin-left: 20px;
}
</style>
